<style lang="scss" scoped>
	@import '@/assets/css/variable';
	.searchBoxWP{
		padding: 0.8rem 1.6rem;
		background-color: white;
		.searchBox {
			border-radius: 3.2rem;
			width: 100%;
			height: 3.6rem;
			background-color: #E8F0FD;
			color: #bfbfbf;
			display: flex;
			align-items: center;
			justify-content: space-between;
			z-index: 3;
			box-sizing: border-box;
			padding: 0 1.2rem;
			.inputBox{
				display: flex;
				align-items: center;
				.inputVal{
					border: none;
					background-color: #E8F0FD;
					font-size: 1.4rem;
					line-height: 2rem;
					margin-left: 0.7rem;
					color:$color2;
				}
			}
			.btn{
				color: $mainColor;
				font-size: 1.2rem;
				line-height: 2rem;
				border-left: 1px solid #C3C5C9;
				padding-left: 1rem;
			}
		}
	}
	$colorpalceholder: #b9b9b9;
	 ::-webkit-input-placeholder {
	      color: $colorpalceholder;
	    }
	    :-moz-placeholder {
	      color: $colorpalceholder;
	    }
	    ::-moz-placeholder {
	      color: $colorpalceholder;
	    }
	    :-ms-input-placeholder {
	      color: $colorpalceholder;
	    }
</style>
<template>
	<div class="searchBoxWP">
		<div class="searchBox">
			<div class="inputBox">
				<van-icon class="icon" class-prefix="iconfont" name="search" size="17"/>
				<input class="inputVal" v-model="input" type="text" placeholder="搜索信息">
			</div>
			<div class="btn" @click="searchEvent">
				<span >搜索</span>
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		data() {
			return {
				input:''
			}
		},
		methods:{
			searchEvent() {
				// console.log("search",this.input)
				this.$emit('searchEvent',this.input)
			}
		}
	}
</script>


